<template>
  <div class="notice-detail-container">
    <!-- 通知内容部分 -->
    <div class="notice-header">
      <h1 class="notice-title">{{ noticeData.title }}</h1>
    </div>
    
    <div class="notice-info">
      <div class="info-item">
        <span class="label">发布人：</span>
        <span class="value">{{ noticeData.publisher }}</span>
      </div>
      <div class="info-item">
        <span class="label">发布时间：</span>
        <span class="value">{{ noticeData.publishTime }}</span>
      </div>
      <div class="info-item">
        <span class="label">接收人：</span>
        <span class="value">{{ noticeData.object === 0 ? '业主' : '物业' }}</span>
      </div>
      <div class="info-item">
        <span class="label">发布类型：</span>
        <span class="value">{{ getPublishTypeText(noticeData.publishType) }}</span>
      </div>
      <div class="info-item" v-if="noticeData.publishType === 2">
        <span class="label">定时发布时间：</span>
        <span class="value">{{ noticeData.scheduleTime }}</span>
      </div>
      <div class="info-item" v-if="noticeData.publishType === 2 && noticeData.scheduleParams">
        <span class="label">重复频率：</span>
        <span class="value">{{ getScheduleFrequencyText(noticeData.scheduleParams.frequency) }}</span>
      </div>
      <div class="info-item" v-if="noticeData.publishType === 2 && noticeData.scheduleParams && noticeData.scheduleParams.frequency === 'weekly' && noticeData.scheduleParams.days.length > 0">
        <span class="label">重复日：</span>
        <span class="value">{{ getWeekDaysText(noticeData.scheduleParams.days) }}</span>
      </div>
      <div class="info-item" v-if="noticeData.publishType === 2 && noticeData.scheduleParams && noticeData.scheduleParams.frequency === 'monthly' && noticeData.scheduleParams.monthDay">
        <span class="label">每月日期：</span>
        <span class="value">{{ noticeData.scheduleParams.monthDay }}号</span>
      </div>
      <div class="info-item" v-if="noticeData.publishType === 2 && noticeData.scheduleParams">
        <span class="label">结束方式：</span>
        <span class="value">{{ getScheduleEndTypeText(noticeData.scheduleParams.endType, noticeData.scheduleParams) }}</span>
      </div>
    </div>
    
    <!-- 通知正文内容 -->
    <div class="notice-content">
      <div v-html="noticeData.content"></div>
    </div>
    
    <!-- 附件列表 -->
    <div class="notice-attachments" v-if="noticeData.filename && noticeData.fileUrl">
      <div class="attachment-list">
        <div class="attachment-item">
          <i class="el-icon-document"></i>
          <a :href="noticeData.fileUrl" target="_blank" class="file-name">{{ noticeData.filename }}</a>
        </div>
      </div>
    </div>
    
    <!-- 公司和联系方式信息 -->
    <div class="notice-footer">
      <div class="company-info">发送人：{{ noticeData.publisher}}</div>
      <div class="publish-date">发送时间：{{ formatDate(noticeData.publishTime) }}</div>
    </div>
    
    <!-- 查看记录 -->
    <div class="view-records">
      <h2 class="records-title">查看记录</h2>
      
      <table class="records-table">
        <thead>
          <tr>
            <th>姓名</th>
            <th>手机号</th>
            <th>房屋号</th>
            <th>浏览时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(record, index) in viewRecords" :key="index">
            <td>{{ record.realName }}</td>
            <td>{{ record.phone }}</td>
            <td>{{ record.name }}</td>
            <td>{{ record.browseTime }}</td>
          </tr>
        </tbody>
      </table>
      
      <!-- 分页组件 -->
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="totalRecords"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          @current-change="handlePageChange">
        </el-pagination>
      </div>
    </div>
    
    <!-- 返回按钮 -->
    <div class="action-buttons">
      <el-button @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NoticeDetail',
  props: {
    noticeId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      noticeData: {
        id: '',
        title: '物业消息通知',
        publisher: '',
        publishTime: '',
        receiverType: '全体业主',
        viewCount: 0,
        content: '',
        companyName: '',
        contactPhone: '',
        filename: '',
        fileUrl: '',
        publishType: 0, // 0-立即发布，1-指定发布，2-定时发布
        scheduleTime: '', // 定时发布时间
        scheduleParams: null // 定时发布参数
      },
      viewRecords: [],
      currentPage: 1,
      pageSize: 10,
      totalRecords: 0,
      isLoading: false
    }
  },
  created() {
    // 页面创建时加载数据
    this.fetchNoticeDetail()
    this.fetchViewRecords()
  },
  methods: {
    // 获取通知详情
    async fetchNoticeDetail() {
      this.isLoading = true
      console.log('获取通知详情',typeof this.noticeId, this.noticeId)
      try {
        // 调用API获取通知详情
        const response = await this.$axios.get(`/api/notice-server/notice/queryById/`+this.noticeId)
        if (response.data && response.data.code === 200) {
          this.noticeData = response.data.data || this.noticeData
     
          // 直接使用返回的filename和fileUrl，不需要特殊处理
        } else {
          this.$message.error('获取通知详情失败: ' + (response.data.message || '未知错误'))
        }
      } catch (error) {
        console.error('获取通知详情失败:', error)
        this.$message.error('获取通知详情失败，请重试')
      } finally {
        this.isLoading = false
      }
    },
    
    // 获取发布类型文本
    getPublishTypeText(type) {
      const types = {
        0: '立即发布',
        1: '指定发布',
        2: '定时发布'
      }
      return types[type] || '立即发布'
    },
    
    // 获取查看记录
    async fetchViewRecords() {
      this.isLoading = true
      try {
        const params = {
            param: Number(this.noticeId),
            pageNum: this.currentPage,
            pageSize: this.pageSize
          }
          console.log(typeof this.noticeId)
        // 调用API获取查看记录
        const response = await this.$axios.post(`/api/notice-server/notice/viewRecords`, params)
        if (response.data && response.data.code === 200) {
          this.viewRecords = response.data.data.list || []
          this.totalRecords = response.data.data.total || 0
        } else {
          this.$message.error('获取查看记录失败: ' + (response.data.message || '未知错误'))
        }
      } catch (error) {
        console.error('获取查看记录失败:', error)
        this.$message.error('获取查看记录失败，请重试')
      } finally {
        this.isLoading = false
      }
    },
    
    // 处理分页变化
    handlePageChange(page) {
      this.currentPage = page
      this.fetchViewRecords()
    },
    
    // 格式化日期显示（年月日）
    formatDate(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
    },
    
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    },
    
    // 获取定时发布参数的文本表示
    getScheduleFrequencyText(frequency) {
      const frequencies = {
        'daily': '每天',
        'weekly': '每周',
        'monthly': '每月'
      }
      return frequencies[frequency] || '未知频率'
    },
    
    // 获取重复日期的文本表示
    getWeekDaysText(days) {
      if (!days || days.length === 0) return '无'
      return days.map(day => {
        const dayText = {
          '0': '周日',
          '1': '周一',
          '2': '周二',
          '3': '周三',
          '4': '周四',
          '5': '周五',
          '6': '周六'
        }
        return dayText[day] || '未知日'
      }).join(', ')
    },
    
    // 获取定时发布结束方式的文本表示
    getScheduleEndTypeText(endType, params) {
      if (endType === 'never') {
        return '永不结束';
      } else if (endType === 'count') {
        return `在${params.count}次后结束`;
      } else if (endType === 'date') {
        return `在${params.endDate}结束`;
      }
      return '未知结束方式';
    }
  }
}
</script>

<style scoped>
.notice-detail-container {
  padding: 20px;
  background-color: #f7f8fa;
  min-height: 100vh;
}

.notice-header {
  text-align: center;
  margin-bottom: 20px;
}

.notice-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.notice-info {
  display: flex;
  flex-wrap: wrap;
  background-color: #f5f5f5;
  padding: 10px 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.info-item {
  margin-right: 20px;
  font-size: 14px;
  color: #666;
}

.label {
  color: #888;
}

.notice-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  min-height: 200px;
  margin-bottom: 20px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.notice-attachments {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.attachment-list {
  display: flex;
  flex-wrap: wrap;
}

.attachment-item {
  margin-right: 20px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.file-name {
  margin-left: 5px;
  color: #409EFF;
  text-decoration: none;
}

.file-name:hover {
  text-decoration: underline;
}

.notice-footer {
  text-align: right;
  margin: 30px 0;
  color: #666;
}

.company-info,
.publish-date,
.contact-info {
  margin-bottom: 5px;
}

.view-records {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-top: 30px;
}

.records-title {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
}

.records-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.records-table th,
.records-table td {
  border: 1px solid #eee;
  padding: 10px;
  text-align: center;
}

.records-table th {
  background-color: #f5f5f5;
  color: #333;
}

.pagination {
  text-align: center;
  margin-top: 20px;
}

.action-buttons {
  margin-top: 20px;
  text-align: center;
}
</style> 